<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        
      1. 事件对象
        + 当事件触发的时候, 浏览器用来记录当前事件所有信息的一个对象数据结构
        + 存储的就是当前事件的所有描述信息

      2. 事件对象内的信息 - 鼠标事件
        2-1. client 一套
          => 语法:
            -> 事件对象.clientX
            -> 事件对象.clientY
          => 得到: 光标相对于浏览器可视窗口左上角的坐标位置
        2-2. page 一套
          => 语法:
            -> 事件对象.pageX
            -> 事件对象.pageY
          => 得到: 光标相对于文档流左上角的坐标位置
        2-3. offset 一套
          => 语法:
            -> 事件对象.offsetX
            -> 事件对象.offsetY
          => 得到: 光标相对于 准确触发事件的元素(事件目标) 左上角的坐标位置

      3. JS 两大家族(client 和 offset)
        3-1. offset 家族
          + offsetWidth
          + offsetHeight
            => 语法: 元素.offsetWidth
            => 语法: 元素.offsetHeight
            => 得到: 该元素 内容+padding+border 区域的尺寸
          + offsetParent
            => 语法: 元素.offsetParent
            => 得到: 该元素的偏移量参考父级
          + offsetLeft
          + offsetTop
            => 语法: 元素.offsetLeft
            => 语法: 元素.offsetTop
            => 得到: 该元素和参考父级之间 左边/上边 的偏移量
          + offsetX
          + offsetY
            => 语法: 事件对象.offsetX
            => 语法: 事件对象.offsetY
            => 得到: 光标相对于 事件目标 左上角的坐标位置
        3-2. client 家族
          + clientWidth
           // 可视化窗口的宽度高度 
          // bom级别   window.innerWidth
          //           window.innerHeight
          // 包含滚动条

          // dom级别    document.documentElement.clientWidth
          // dom级别    document.documentElement.clientHeight
          //不包含
          + clientHeight
            => 语法: 元素.clientWidth
            => 语法: 元素.clientHeight
            => 得到: 该元素的 内容+padding 区域的尺寸
          + clientLeft
          + clientTop
            => 语法: 元素.clientLeft
            => 语法: 元素.clientTop
            => 得到: 该元素 (内容+padding) 与 border 左上角的距离(左边框和上边框的宽度)
          + clientX
          + clientY
            => 事件对象.clientX
            => 事件对象.clientY
            => 得到: 光标相对于浏览器可视窗口左上角的坐标位置

      4. 事件对象内的信息 - 键盘事件
        4-1. 键盘编码
          + 语法: 事件对象.keyCode
        4-2. 组合按键
          + 四个属性
            => shiftKey
            => ctrlKey
            => altKey
            => metaKey
          + 以上四个属性的值默认是 false, 表示没有按下
            当按键按下的时候, 值为 true

    
        
        */
    </script>
</body>
</html>